import { useEffect, memo } from "react"


// memo()的比较函数：
function areEqual(prevProps, nextProps) {
  console.log("prevProps:", prevProps, "nextProps:", nextProps);
  //   比较的原理：可以通过循环前后2个Props对象的属性，来比较相同属性的值，是不是一致
  // 这里只比较了a属性
  if (prevProps.a === nextProps.a) {
    console.log('props.a 属性是相同的');
    return true;
  } else {
    console.log('props.a 属性是不相同的');
    return false;
  }
}

const MyMemo = (props) => {
  useEffect(() => {
    console.log("MyMemo组件的useEffect()输出：", props); //{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, a: 1}
  })

  return (
    <div>
      <h1>MyMemo组件</h1>
    </div>
  )
}
// 只要Props绑定的数据的引用改变，哪怕数据内容相同，都一定会重新渲染。
// export default MyMemo

// 只要Props绑定的数据的引用改变，数据内容相同时，不会重新渲染。
// 比较Props值的函数，仅当props改变时，才执行比较函数。
// 但是如果props属性的值没有变化，组件不会重新渲染的。
export default memo(MyMemo, areEqual)